<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <el-form :model="searchForm" label-width="80px" class="mb-3" size="small">
            <el-row :gutter="20">
                <el-col :span="5" :offset="0">
                    <el-form-item label="工程师姓名">
                        <el-input v-model="searchForm.engineerName" placeholder="工程师姓名" clearable></el-input>
                    </el-form-item>
                </el-col>

                <el-col :span="5">
                    <el-form-item label="工单类型">
                        <el-select v-model="searchForm.orderType" clearable placeholder="工单类型">
                            <el-option v-for="item in orderTypes" :key="item.code" :label="item.description"
                                :value="item.code" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="5">
                    <el-form-item label="周期类型">
                        <el-select v-model="searchForm.timeType" placeholder="周期类型" clearable>
                            <el-option key="1" label="周" value="1" />
                            <el-option key="2" label="月" value="2" />
                            <el-option key="3" label="季" value="3" />
                            <el-option key="4" label="年" value="4" />
                        </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="5">
                    <div class="flex items-center justify-end">
                        <el-button type="primary" @click="getData(1)">搜索</el-button>
                        <el-button @click="clickResetBtn">重置</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>

        <!-- 表格数据 -->
        <el-table :data="tableData" stripe style="width: 100%" v-loading="tableDataLoading">

            <el-table-column prop="engineerName" label="工程师姓名" align="center"></el-table-column>

            <el-table-column prop="orderFinishCount" label="完工数量" align="center"></el-table-column>

            <el-table-column prop="workHourCount" label="工时统计" align="center"></el-table-column>

            <el-table-column prop="moneyCount" label="报销金额统计" align="center"></el-table-column>

            <el-table-column prop="daysCount" label="工单天数" align="center"></el-table-column>

            <el-table-column prop="commentCount" label="个人满意度统计" align="center"></el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev, pager ,next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import { api_project_constant } from "~/api/ordersApi"
import { engineerStatistic } from "~/api/ordersApi";

// 页面变量
const orderTypes = ref([])
const tableData = ref([]) // 列表数据
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)
const tableDataLoading = ref(false)
const searchForm = reactive({
    engineerName: null,
    orderType: null,
    timeType: null,
    page: currentPage.value,
    size: limit.value,
})

// 生命周期
onMounted(() => {

    //字典数据
    getProjectConstant()

    //加载表格数据
    getData()
})

// 获取订单状态
function getProjectConstant() {
    api_project_constant().then(res => {
        orderTypes.value = res?.orderTypes
    })
}

//获取列表数据
function getData(p = null) {
    if (typeof p == "number") {
        currentPage.value = p
    }
    tableDataLoading.value = true
    searchForm.page = currentPage.value
    engineerStatistic(searchForm)
        .then(res => {
            if (res) {
                tableData.value = res.records
                total.value = res.total
            } else {
                tableData.value = []
                total.value = 0
            }
        })
        .finally(() => {
            tableDataLoading.value = false
        })
}

//点击重置按钮
const clickResetBtn = () => {
    searchForm.engineerName = null
    searchForm.orderType = null
    searchForm.timeType = null
    getData(1)
}
</script>